<template>
    <Table border :columns="getColumns" :data="object" :span-method="handleSpan">
        <template slot-scope="{ row, index }" slot="ip">
            <Input v-model="object[index].ip" :readonly="ifedit || isHandle" @on-blur="checkIP(object[index].ip,index)"/>
        </template>
        <template slot-scope="{ row, index }" slot="vip">
        	<Input v-if="isHandle || ifShow" v-model="vipObject.ip" @on-blur="checkVIP(vipObject.ip,0)" :readonly="ifShow"/>
            <span v-else>业务人员处理时填写</span>
        </template>
        <template slot-scope="{ row, index }" slot="des">
            <Input v-model="object[index].des" :readonly="ifedit || isHandle"/>
        </template>
        <template slot-scope="{ row, index }" slot="action">
            <Button type="error" @click="remove(index)" size="small" :disabled="(object.length==1) || ifedit">删除</Button>
        </template>
    </Table>
</template>

<script>
    import ajax from "../../../ajax_util"
    import Axios from 'axios'

    export default {
		data (){
        	return {
        		columns: [
                    {
                        title: 'IP地址',
                        slot: 'ip'
                    },
                    {
                        title: 'vip',
                        slot: 'vip'
                    },
                    {
                        title: '备注',
                        slot: 'des'
                    },
                    // {
                    //     slot: 'action',
                    //     align: 'center',
                    //     renderHeader: (h, index) => {
                    //        return h('div', [
                    //             h(!this.ifedit?'Button':"", {
                    //                 props: {
                    //                     type: 'primary',
                    //                     size: 'small'
                    //                 },
                    //                 on: {
                    //                     click: () => {
                    //                         if(!this.ifedit){
                    //                             this.addRow()
                    //                         }
                    //                     }
                    //                 }
                    //             }, !this.ifedit?'新增':"")
                    //         ])
                    //     }
                    // }
                ],
                readonly: true,
        	}
        },
        methods:{
            handleSpan({ row, column, rowIndex, columnIndex }){
                if (rowIndex === 0 && columnIndex === 1) {
                    return {
                        rowspan: this.object.length,
                        colspan: 1
                    };
                } else if (rowIndex > 0 && columnIndex === 1) {
                    return {
                        rowspan: 0,
                        colspan: 0
                    };
                }
            },
        	addRow(){
        		this.object.push(
    				{
						des: "",
						id: 0,
						ip: "",
						overId: 0,
                        ipGroup:this.IpGroup,
					}
        		);
        	},
        	remove(index){
        		this.object.splice(index, 1);
        	},
            checkIP(data,index){
                console.log("====data====",data);
                let ipRegex = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/
                if (ipRegex.test(data) === false) {
                    this.$Message.error('输入IP格式有误，请重新输入！')
                    this.object[index].ipFlag = true;
                } else {
                    this.object[index].ipFlag = false;
                }
            },
            checkVIP(data,index){
                console.log("====data====",data);
                let ipRegex = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/
                if (ipRegex.test(data) === false) {
                    this.$Message.error('输入IP格式有误，请重新输入！')
                    this.vipObject.ipFlag = true;
                } else {
                    this.vipObject.ipFlag = false;
                }
            },
            getVIP(){
            	console.log(",,,,,,,,,,,,,,,,,,,,,");
            	return this.vipObject;
            }
        },
        computed: {
            object: {
                get: function() {
                    return this.value;
                },
                set: function(value) {
                    this.$emit('input', value);
                }
            },
            getColumns(){
            	if(!this.isHandle && !this.ifedit){
            		this.columns.push(
	                    {
	                        slot: 'action',
	                        align: 'center',
	                        renderHeader: (h, index) => {
	                           return h('div', [
	                                h(!this.ifedit?'Button':"", {
	                                    props: {
	                                        type: 'primary',
	                                        size: 'small'
	                                    },
	                                    on: {
	                                        click: () => {
	                                            if(!this.ifedit){
	                                                this.addRow()
	                                            }
	                                        }
	                                    }
	                                }, !this.ifedit?'新增':"")
	                            ])
	                        }
	                    }
            		);
            	}

            	return this.columns;
            }
        },
        props: {
            value: {},
            IpGroup:'',
            ifedit: {
                type: Boolean,
                default: false,
            },
            isHandle: {
            	type: Boolean,
            	default: false,
            },
            ifShow: {
                type: Boolean,
                default: false,
            },
            vipObject:{
            	default:() => {
					return ({des: "",
					id: 0,
					ip: "",
					overId: 0,
                    ipGroup:""})
				}
            }
        },
	    watch: {
	    }
    }
</script>